<extend name="Public:mainbase" />
<block name="content">
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/dhtmlxtree.css"/>
    <script language="javascript" src="__PUBLIC__/js/member.js?{:time()}"></script>
    <script language="javascript" src="__PUBLIC__/js/Validform_v5.3.2_min.js?{:time()}"></script>
    <link href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/bootstrap-switch/bootstrap-switch.min.css">
    <script src="__PUBLIC__/bootstrap-switch/bootstrap-switch.min.js"></script>
    
    <style type="text/css">
        .Validform_checktip{line-height: 34px}
        .table>tbody>tr>td{vertical-align: middle;}
        .fileList,.filePicker{margin-left: 40px;width: 80%}
        .operation a{font-size: 18px;}
        .overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;_padding:0 20px 0 0;background:#f6f4f5;display:none;}
        .showbox{position:fixed;top:0;left:50%;z-index:9999;opacity:0;filter:alpha(opacity=0);margin-left:-85px;}
        *html,*html body{background-image:url(about:blank);background-attachment:fixed;}
        *html .showbox,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
        #AjaxLoading{border:1px solid #8CBEDA;color:#37a;font-size:12px;font-weight:bold;}
        #AjaxLoading div.loadingWord{width:190px;height:58px;line-height:58px;border:2px solid #D6E7F2;background:#fff;}
        #AjaxLoading .loadingPic{margin:10px 15px;float:left;display:inline;}
    </style>
    <!--  内容列表   -->
    <form name="form2" method="post">
        <table width="98%" class="table table-bordered  table-hover table-condensed "  align="center">
            <tr bgcolor="#E7E7E7" >
                <td height="28" colspan="11" background="__PUBLIC__/images/tbg.gif" style="padding-left:10px;">
                    ◆ 前台栏目列表 &nbsp;&nbsp;&nbsp;&nbsp;
                    <switch name='Think.get.ctype'>
                        <case value="live">
                        <a href="{:U('getLiveList')}?cid={$Think.get.cid}" class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-plus"></i> 添加内容</a>
                        </case> 
                        <case value="recommend">
                        <a href="{:U('getCommonList')}?cid={$Think.get.cid}" class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-plus"></i> 添加内容</a>
                        </case> 
                        <case value="slider">
                        <a href="{:U('getCommonList')}?cid={$Think.get.cid}&c_type={$val.category_type}" class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-plus"></i> 添加内容</a>
                        </case> 
                        <case value="special">
                        <a href="{:U('getSpecialList')}?cid={$Think.get.cid}" class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-plus"></i> 添加内容</a>
                        </case> 
                        <case value="author">
                        <a href="{:U('getAuthorList')}?cid={$Think.get.cid}" class="btn btn-xs btn-warning"><i class="glyphicon glyphicon-plus"></i> 添加内容</a>
                        </case> 
                    </switch>
                </td>
            </tr>
            <tr align="center" valign="middle" bgcolor="#FBFCE2" height="25" style="vertical-align: middle">
                <td width="6%">ID</td>
                <td width="4%">选择</td>
                <td width="180px">缩略图</td>
                <td>标题</td>
                <td width="10%">显示</td>
                <td width="10%">类型</td>
                <td width="10%">签发时间</td>
                <td>操作</td>
            </tr>
            <foreach name="contentList" item="val">
                <tr align='center' valign="middle" bgcolor="#FFFFFF" class="canSort" height="101" item_id="{$val.id}" sort_num="{$val.sort}">
                    <td  width="6%" nowrap style="vertical-align: middle;">{$val.id}</td>
                    <td width="4%" style="vertical-align: middle;">
                        <input name="id" type="checkbox" value="{$val.id}" class="np" />
                    </td >
                    <td width="180px" style="vertical-align: middle;">
                        <?php if($val['image_url'] && $val['type']!='slider') { ?>
                        <img src="{$val.image_url}?imageView2/2/w/180/h/101" width="180" height="101">
                        <?php }elseif($val['image_url'] && $val['type']=='slider'){ ?>
                        <?php }else{ ?>
                        <img src="__PUBLIC__/images/defaultpic.gif"  width="180" height="101" alt="">
                        <?php } ?>
                    </td>
                    <td style="vertical-align: middle;">
                        <switch name="val.type">
                            <case value="live">
                                {$val.title}
                            </case>
                            <case value="special">
                                <a href="{:U('Special/manageSpecialContent')}?sid={$val.theme_id}">{$val.title}</a>
                            </case>
                            <case value="author">
                                {$val.title}
                            </case>
                            <default />default
                        </switch>
                    </td>
                    <td width="10%" style="vertical-align: middle;"><input type="checkbox" data-cid="{$val.id}" data-size="mini" data-animate="false" data-on-text="显示" data-off-text="隐藏" data-on-color="info" class="mySwitch switchShowMore" <?php echo $val['state'] ? 'checked' : '' ?> /></td>
                    <td width="10%" style="vertical-align: middle;">{$val.type}</td>
                    <td width="10%"  style="vertical-align: middle;">{$val.update_time|myDate="Y-m-d H:i",###}</td>
                    <td class="operation" style="vertical-align: middle;">
                        <eq name="Think.get.ctype" value="slider">
                        
                        <a href="javascript:void(0);" data-id='{$val.id}' class='editItem'  data-toggle="modal" data-target=".thumbJump"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
                        |
                        </eq>
                        <a href="javascript:;" data-id='{$val.id}' class='delItem'><i class="fa fa-trash-o" aria-hidden="true"></i></a>
                    </td>
                </tr>
            </foreach>
            <tr bgcolor="#ffffff">
                <td height="36" colspan="11">
                    &nbsp;
                    <a href="javascript:selAll()" class="btn btn-xs btn-info"><i class='glyphicon glyphicon-ok'></i> 全选</a>
                    <a href="javascript:noSelAll()" class="btn btn-xs btn-info"><i class='glyphicon glyphicon-remove'></i> 取消</a>
                    <!-- <a href="javascript:checkArc(0)" class="btn btn-xs btn-info">&nbsp;审核&nbsp;</a> -->
                    <a href="javascript:;" id="delcategoryall" class="btn btn-xs btn-info"><i class="glyphicon glyphicon-trash"></i> 删除</a>
                </td>
            </tr>

    <tr align="right" bgcolor="#F9FCEF">
        <td height="36" colspan="11" align="center">
            <div class='page'>{$showpage}</div>
        </td>
    </tr>
    </table>
    </form>

     搜索表单
    <form name='form3' action='' method='get'>
    <input type="hidden" name='cid' value='{$Think.get.cid}'>
    <input type="hidden" name='ctype' value='{$Think.get.ctype}'>
    <table width='98%'  class='table' align="center" style="margin-top:8px">
        <tr bgcolor='#EEF4EA'>
            <td background='__PUBLIC__/images/wbg.gif' align='center'>
                <table border='0' cellpadding='0' cellspacing='0' height="32">
                    <tr>
                        <td nowrap>搜索内容：</td>
                        <td width='130'>
                            <input type='text' name='name' value='' style='width:120px' />
                        </td>
                    <td>
                        <input type="image" src="__PUBLIC__/images/button_search.gif" width="60" height="22" border="0" class="np" />
                    </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </form>

    <div class="overlay"></div>
    <div id="AjaxLoading" class="showbox">
        <div class="loadingWord"><span class="loadingPic"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></span> 排序中，请稍候...</div>
    </div>

   <div class="modal fade thumbJump" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改元件</h4>
                </div>
                <form action="{:U('editItem')}" method="POST" class="form-horizontal" id="editSpecialForm" style="padding:15px 0">
                    <input name='id' type="hidden" value=''>

                    <div class="form-group">
                        <label for="status" class="col-sm-2 control-label">状态</label>
                        <div class="col-sm-5">
                            <select name="status" id="status" class="form-control" datatype="*" nullmsg='请选择状态' sucmsg=" ">
                                <option value="1">使用中</option>
                                <option value="0">已冻结</option>
                            </select>
                        </div>
                        <div class="col-sm-5"></div>
                    </div>


                    <div class="form-group">
                        <div class="fileList uploader-list"></div>
                        <div class="filePicker addSpecial">选择封面图片</div>
                        <input type="hidden" name="image_url" class="image_url">
                    </div>

                    <div class="add-error-message error item"></div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-success">确定保存</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button type="button" class="btn btn-danger"  data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <style>
        .ui-state-highlight{height: 112px;background:#ececec;}
    </style>
    <script>
        $(".mySwitch").bootstrapSwitch();
        var sortNum;
        var sortedIDs
        var isChange=false;

        function ShowLoading() {
            $(".overlay").css({ 'display': 'block', 'opacity': '0.8' });
            $(".showbox").stop(true).animate({ 'margin-top': '300px', 'opacity': '1' }, 200);
        }

        function HiddenLoading() {
            $(".showbox").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400);
            $(".overlay").css({ 'display': 'none', 'opacity': '0' });
        }

        $( ".table tbody" ).sortable({
            items: "tr.canSort",
            placeholder:"ui-state-highlight",
            forcePlaceholderSize: true,
            cursor: "move",
            start:function(){
                sortNum = $( ".table tbody" ).sortable( "toArray",{attribute:'sort_num'});
            },

            update:function(){
                sortedIDs = $( ".table tbody" ).sortable( "toArray",{attribute:'item_id'} );
                ShowLoading();
                console.log(sortedIDs);
                $.ajax({
                    async:false,
                    dataType:'json',
                    url:'{:U("ajaxSetSort")}',
                    data:{sortedIDs:sortedIDs,sortNum:sortNum},
                    success:function(data){
                        if(data.resultCode!=0){
                            $( ".table tbody" ).sortable( "cancel" );
                            alert(data.info);
                        }else{
                            $(".canSort").each(function(i){
                                $(this).attr('sort_num',sortNum[i]);
                            })
                        }
                    },
                    error:function(){
                        $( ".table tbody" ).sortable( "cancel" );
                        alert('修改排序失败！');
                    },
                    complete:function(){
                        HiddenLoading();
                    }
                })
            }
        });
        $( ".table tbody" ).disableSelection();

        $(".delItem").click(function(){
            var _this=this;
            if(confirm('是否确认删除此记录？')){
                $.get('{:U("ajaxDelItem")}',{id:$(_this).data('id')},function(data){
                    if(data==1){
                        $(_this).parents('tr').remove();
                    }else{
                        alert('删除失败');
                    }
                })
            }
        })

        $('.switchShowMore').on('switchChange.bootstrapSwitch', function(event, state) {
            var cid=$(this).data('cid');
            state=state?1:0;
            $.getJSON('{:ajaxSetState}',{cid:cid,state:state},function (data) {
                if(data.resultCode!=0){
                    alert(data.info);
                    $(this).bootstrapSwitch('toggleState');
                }
            })
        });


        $('.thumbJump').on('shown.bs.modal', function (e) {
            $('.thumbJump form').get(0).reset();
            $(this).find("input,select").val("");
            $(".fileList").empty();
            var _this=e.relatedTarget;
            $.getJSON("{:U('ajaxGetItemInfo')}?id="+$(_this).data('id'),function(data){
                console.log(data);
                if(data!=0){
                    $(".thumbJump [name=id]").val(data.id);
                    $(".thumbJump [name=status]").val(data.state);
                    $(".thumbJump [name=image_url]").val(data.image_url);
                    $(".thumbJump .fileList").append('<div id="WU_FILE_0" class="file-item thumbnail"><img src="'+data.image_url+'"></div>')
                }
            })
        });

        $('.thumbJump').on('hidden.bs.modal', function (e) {
            $('.thumbJump form').get(0).reset();
            $(this).find("input,select").val("");
            $(".fileList").empty();
            uploader.reset();
            uploader.destroy();
        });

        var uploader;
        $('.thumbJump').on('shown.bs.modal',function(e){
            uploader= WebUploader.create({
                auto: false,
                swf: '__PUBLIC__/webUploader/Uploader.swf',
                server: 'http://upload.qiniu.com',
                pick: '.filePicker',
                thumb:{
                    width: 400,
                    height:225,
                    crop: false,
                },
                formData:{
                    token:"{$uploadToken}"
                },
                fileNumLimit:1,
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            uploader.on('beforeFileQueued',function(){
                $(".modal:visible .btn-success").attr('type','button').prop('disabled',false);
                $(".fileList").empty();
                uploader.reset();
            });
            uploader.on( 'fileQueued', function( file ) {
                var $li = $(
                                '<div id="' + file.id + '" class="file-item thumbnail">' +
                                '<img>' +
                                '</div>'
                        ),
                        $img = $li.find('img');

                $('.modal:visible .fileList').append( $li );

                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr( 'src', src );
                });
            });

            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress span');
                if ( !$percent.length ) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo( $li )
                            .find('span');
                }
                $percent.css( 'width', percentage * 100 + '%' );
            });


            uploader.on( 'uploadSuccess', function( file,response ) {
                $( '#'+file.id ).addClass('upload-state-done');
                $(".modal:visible .image_url").val("{:C('IMAGE_HOST')}"+response.key);
                $(".modal:visible .btn-success").attr('type','submit').prop('disabled',false);
                $(".modal:visible form").submit();
            });
            // 文件上传失败，显示上传出错。
            uploader.on( 'uploadError', function( file ) {
                var $li = $( '#'+file.id ),
                        $error = $li.find('div.error');
                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }
                $error.text('上传失败');
            });


            uploader.on( 'uploadComplete', function( file ) {
                $(".modal:visible .btn-success").prop('disabled',false);
                $( '#'+file.id ).find('.progress').remove();
            });
        })
        

        $(".btn-success").click(function(){
            if($(this).is(":button")){
                $(".modal:visible .btn-success").attr('type','submit').prop('disabled',true);
                uploader.upload();
            }

        })

        function selAll(){
            $('[name=id]').prop('checked',true);
        }
        function noSelAll(){
           $('[name=id]').prop('checked',false);
        }

        $("#delcategoryall").click(function(){
            var id=$('[name=id]:checked').map(function(){return $(this).val()});
            if(confirm('是否确定批量删除？')){
                $.get('{:U("ajaxDelItem")}',{id:id.get().join()},function(data){
                    location.reload();
                })
            }
        })



    </script>
</block>